<template>
    <div class="container">
      <!-- 问卷题目 -->
      <div class="questionnaire-title">
        <h1>{{questionnaireTitle}}</h1>
      </div>
      <div v-show="showMessage" class="show-mess">暂时无填写数据</div>
      <div v-for="(item,index) in questionnaireData" :key="index"
        style="background-color: rgb(255, 255, 255);margin-top: 20px;padding-bottom:50px;border:solid 2px #CCC">
        <!-- 问题题目 -->
        <div class="question-title">
          <h2 >{{questionnaireData[index].message.questionTitle}}</h2>
          <h2 >回答总人数：{{questionnaireData[index].message.totalnum}}</h2>
        </div>
        <div v-if="questionnaireData[index].message.topic === 1">
          <el-button type="primary" @click="setPieOption(index)">显示饼图</el-button>
          <el-button type="primary" @click="setBarOption(index)">显示条形图</el-button>
        </div>
        <div :id="index" ref="myarr" v-if="questionnaireData[index].message.topic != 3"
        style="width: 56%;height:500px;background-color: white;margin-top: 10px;padding-left:25%">
        </div>
        <div class="data-table" v-if="questionnaireData[index].message.topic !== 3">
          <el-table :data="getTableData(index)" max-height="300px" border style="width: 70%;margin:0px auto;">
            <el-table-column prop="name" label="选项"></el-table-column>
            <el-table-column prop="value" label="填写人数"></el-table-column>
          </el-table>
        </div>
        <div class="data-table" v-if="questionnaireData[index].message.topic === 3">
          <el-table :data="getTableData(index)" border style="width: 70%;margin:0px auto">
            <el-table-column prop="name" label="回答情况"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
</template>

<script>

export default {
  data() {
    return {
      showMessage: false,
      questionnaireid: 0,
      questionnaireTitle: '问卷1',
      jianjie: '简介',
      chartType: 0,
      questionnaireData: [
        {
          message: { questionTitle: '单选1', topic: 1, totalnum: 100 },
          qdata: [
            { value: 40, name: '邮件营销' },
            { value: 16, name: '联盟广告' },
            { value: 10, name: '视频广告' },
            { value: 14, name: '搜索引擎' },
            { value: 5, name: '选项1' },
            { value: 5, name: '选项2' },
            { value: 5, name: '选项3' },
            { value: 5, name: '选项4' },
            { value: 5, name: '选项5' },
            { value: 1, name: '选项6' },
            { value: 1, name: '选项7' },
            { value: 1, name: '选项8' },
            { value: 1, name: '选项9' },
            { value: 1, name: '选项' }]
        },

        {
          message: { questionTitle: '多选1', topic: 2, totalnum: 100 },
          qdata: [
            { value: 100, name: '选项1' },
            { value: 100, name: '选项2' },
            { value: 60, name: '选项3' },
            { value: 40, name: '选项6' },
            { value: 80, name: '选项4' },
            { value: 10, name: '选项5' }]
        },

        {
          message: { questionTitle: '单选2', topic: 1, totalnum: 100 },
          qdata: [{ value: 100, name: '选项1' }]
        },

        {
          message: { questionTitle: '填空2', topic: 3, totalnum: 2 },
          qdata: [{ value: 0, name: 'wo是帅逼' }, { value: 0, name: 'wo真帅' }]
        }
      ],
      barOption: {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          formatter: '{a} <br/>{b}: {c}',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      },
      pieOption: {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        // CSS 样式
        legend: {
          orient: 'vertical',
          left: 10,
          data: []
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      }
    }
  },
  created: async function() {
    var res = this.$route.query.res
    this.questionnaireid = res.data.questionnaireid
    this.questionnaireData = res.data.questionnaireData
    this.questionnaireTitle = res.data.questionnaireTitle
  },
  mounted() {
    this.$nextTick(() => {
      if (this.questionnaireData.length === 0) {
        this.showMessage = true
        return
      }
      for (var i = 0; i < this.questionnaireData.length; i++) {
        if (this.questionnaireData[i].message.topic !== 3) {
          this.setBarOption(i)
        }
      }
    })
  },
  methods: {
    setBarOption(indexId) {
      if (this.questionnaireData[indexId].message.topic === 3) {
        return
      }
      var tempid = document.getElementById(indexId)
      var myChart = this.$echarts.init(tempid)
      var tempdata = this.questionnaireData[indexId].qdata
      var temparr = []
      var templabel = []
      for (var i = 0; i < tempdata.length; i++) {
        temparr.push(tempdata[i].value)
        templabel.push(tempdata[i].name)
      }
      this.barOption.series[0].data = temparr
      this.barOption.xAxis[0].show = true
      this.barOption.yAxis[0].show = true
      this.barOption.xAxis[0].data = templabel
      myChart.setOption(this.barOption)
    },
    // 设置饼图参数
    setPieOption(indexId) {
      if (this.questionnaireData[indexId].message.topic !== 1) {
        return
      }
      var tempid = document.getElementById(indexId)
      var myChart = this.$echarts.init(tempid)
      var tempdata = this.questionnaireData[indexId].qdata
      var templabel = []
      for (var i = 0; i < tempdata.length; i++) {
        templabel.push(tempdata[i].name)
      }
      this.pieOption.legend.data = templabel
      this.pieOption.series[0].data = tempdata
      this.pieOption.xAxis[0].show = false
      this.pieOption.yAxis[0].show = false
      this.pieOption.color = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
      myChart.setOption(this.pieOption)
    },
    getTableData(index) {
      var tableData = this.questionnaireData[index].qdata
      return tableData
    }
  }
}
</script>
<style>
.container{
  text-align:center;
  /* border:solid 1px #CCC; */
  margin:2px;
}
.questionnaire-title{
  margin-left: 15px;
  padding-bottom: 10px;
  text-align:center;
}
.show-mess{
  font-size: 20px;
  margin: 15% auto;
}
</style>
